import React, {Component} from 'react';
import {connect} from 'dva';
import {Link, routerRedux} from 'dva/router';
import {createForm} from 'rc-form';
import MyScroll from '../../components/MyScroll/MyScroll';
import {
    Icon,
    WingBlank,
    Button,
    InputItem,
    Modal,
    Flex,
    Toast,
    Card,
    ListView
} from 'antd-mobile';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import Img from "../../components/Img/Img";

import{
    p_title,
    icon_center,
    div_height,
    box_background,
    box_row,
    btn_icon,
    img_status,
    divCard
}
from './myInvoice.less';

import icon_editsvg from "../../assets/svg/icon_edit.svg"
import cartdelectsvg from "../../assets/svg/cartdelect.svg"
import auditedsvg from "../../assets/svg/audited.svg"
import auditFailuresvg from "../../assets/svg/auditFailure.svg"
import select1svg from '../../assets/img/select1.svg';
import select2svg from '../../assets/img/select2.svg';
import {wxInvoice} from "../../utils/weixinShare";
import MyListView from '../../components/MyListView/MyListView';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
import {IMAGE_DOMAIN,isWechat} from '../../utils/common';


class MyInvoice extends Component {
    constructor(props) {
        super(props);

        const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID];
        const getRowData = (dataBlob, sectionID, rowID) => dataBlob[rowID];
        const dataSource = new ListView.DataSource({
            getRowData,
            getSectionHeaderData: getSectionData,
            rowHasChanged: (row1, row2) => row1 !== row2,
            sectionHeaderHasChanged: (s1, s2) => s1 !== s2
        });
        this.state = {
            dataSource,
            isLoading: true,
            height: document.documentElement.clientHeight * 3 / 4
        };
    }

    refresh = () => {
        //// return this.props.dispatch({ type: 'evaluateList/evaluatesEFF', obj:{ pageNo:1 } });
        //return new Promise(function(resolve, reject) {
        //    // setTimeout(function() {
        //    resolve({r: true});
        //    //   }, 2000);
        //});
        console.log('refresh..........')
        return this.props.dispatch({type: 'accountManagement/getInVoiceEFF', obj: {pageNo: 1}});

    }

    loadMore = () => {
        return this.props.dispatch({type: 'accountManagement/getInVoiceEFF', obj: {pageNo: this.props.evaluateList.pageNo + 1}});
    }

    getAlloyTouch = (AT) => this.AlloyTouch = AT

    getDate = (listData = []) => {
        var {
            sectionIDs = [],
            dataBlobs = {},
            rowIDs = []
        } = {};

        sectionIDs = [`Section 1`];
        dataBlobs[`Section 1`] = `Section 1`;

        rowIDs[0] = [...listData].map(e => {
            dataBlobs[`S1, ${e.invId}`] = e;
            return `S1, ${e.invId}`;
        });

        sectionIDs = [...sectionIDs];
        rowIDs = [...rowIDs];

        return this.state.dataSource.cloneWithRowsAndSections(dataBlobs, sectionIDs, rowIDs);

    }

    clickTo = (e, url) => this.props.dispatch(routerRedux.push({pathname: url}))

    del = id => {

        Modal.alert('删除', '您确认要删除此发票', [
            { text: '取消', onPress: () => console.log('cancel'), style: 'default' },
            { text: '确认', onPress: () => {
                this.props.dispatch({ type: "accountManagement/delInVoiceEFF", obj: {id: id} }).then(result=>{
                    if(result.code==200){
                        Toast.success(result.msg,1.5,()=>{
                            this.refresh();
                        })
                    }else{
                        Toast.fail(result.msg,1.5)
                    }
                })
            }},
        ]);

    }

    componentDidMount() {
        this.props.dispatch({ type: 'my/DetailEFF' });
    }

    componentDidUpdate() {}

    render() {
        const {orderAddress, dispatch,my} = this.props;

        var hasMore = false;
        const { invoiceBasic = [] } = this.props.accountManagement.invoiceList;

        //console.log(this.props.accountManagement.invoiceList, "this.props");
        console.log(my.detaList)
        return (<div>
            <NavTopBar style={{
                    border: "none"
                }} title="我的发票" dispatch={this.props.dispatch}/>

            <div className={divCard}>
                <div style={{
                        height: ".8rem"
                    }}><NoLazyImg src={my.detaList.avatar || ""}/></div>
                <div>{my.detaList.truename}</div>
                {/* <Flex style={{color:"#999"}} onClick={e => {
                        return false;
                        this.clickTo(e, `${" "}`)
                    }}>我的开票记录<Icon type="right"/>
                </Flex> */}
            </div>

            {/*
                <div style={{ width: "100%", position: "absolute", top: "2rem", bottom: "0.8rem", overflow: "hidden" }}>
                <ListView className={box_background} dataSource={this.getDate(this.props.accountManagement.invoiceList.list)} renderRow={(rowData) => {
                return (<div key={rowData.invId} className={box_row} onClick={e => {
                this.clickTo(e, `/editAddress/${ " "}`)
                }}>
                <div style={{
                position: "relative"
                }}>
                <p className={p_title}>{rowData.invCompany || "金天国际"}</p>
                <p>{rowData.invCode}（纳税人识别号）</p>
                <p>{rowData.invTitle}</p>

                {
                rowData.isDefault != 0 || <div className={btn_icon}><Icon type={cartdelectsvg.id} size={"xxs"} onClick={e => {
                e.stopPropagation();
                var deleteBtn = Modal.alert("Delete", "您确认要删除吗？", [
                {
                text: '取消',
                onPress: () => deleteBtn.close(),
                style: 'default'
                }, {
                text: '确认',
                onPress: () => this.del(rowData.invId),
                style: 'success'
                }
                ]);
                }}/><Icon type={icon_editsvg.id} size={"xxs"} onClick={e => {
                this.clickTo(e, `/editAddress/${ " "}`)
                }}/></div>
                }
                <div className={img_status}><Icon type={rowData.isDefault == 1
                ? auditedsvg.id
                : auditFailuresvg.id} style={{
                height: "1.2rem",
                width: "1.2rem"
                }}/></div>
                </div>
                </div>);
                }} initialListSize={15}/>
                </div>

                */
            }
            <div style={{
                    width: "100%",
                    position: "absolute",
                    top: "2rem",
                    bottom: "0.8rem",
                    overflow: "hidden",
                marginTop:".3rem"
                }}>
                <MyListView
                    // key={ layoutType == true ? 1 : 0 }

                    // className={box_background}
                    style={{height: "100%"}}
                    getAlloyTouch={this.getAlloyTouch}
                    refresh={this.refresh}
                    loadMore={this.loadMore}
                    hasMore={hasMore}
                    renderItem={(v, i, a) => {
                        if (v.invState == "1") {
                            return (<WingBlank key={v.invId}>
                                    <div  className={box_row} >
                                        <div style={{
                                            position: "relative"
                                        }}>
                                            <p className={p_title}>{ v.invTitle==3 ? v.titleName: v.invCompany }<span style={{float:"right",fontSize:"0.22rem"}}>{v.invTitle == "3" ? "个人" : "公司"}</span></p>
                                            {
                                                v.invTitle=="3" || <p>{ v.invCode }（纳税人识别号）</p>
                                            }
                                            <p>{ v.invRegAddr }</p>

                                            {
                                                <div className={btn_icon}>{/*
                                                     <Icon type={cartdelectsvg.id} size={"xxs"} onClick={e => {
                                                     this.del(v.invId)
                                                     }}/><Icon type={icon_editsvg.id} size={"xxs"} onClick={e => {
                                                     e.stopPropagation();
                                                     this.props.dispatch(routerRedux.push({pathname: `/invoice`}));
                                                     }}/>
                                                */}
                                                    {
                                                        !v.isPass ||
                                                        <Flex style={{float:"left"}}>
                                                            {
                                                                v.isDefault==1 ?
                                                                    <div style={{color:"#FF0036"}}><Icon type={select1svg.id} size="xxs"/><span>设为默认</span></div>
                                                                    : <div onClick={() => {
                                                                        dispatch({ type:"accountManagement/edtInvoiceApiEFF", obj: { id: v.invId } });
                                                                    }}><Icon size="xxs" type={select2svg.id}/><span>设为默认</span></div>
                                                            }
                                                        </Flex>
                                                    }
                                                    <Flex style={{float:"right"}}>
                                                        <span onClick={e => {
                                                            e.stopPropagation();
                                                            dispatch(routerRedux.push({
                                                                pathname: `/invoice/${v.invId}`,
                                                            }));
                                                        }}>编辑</span>
                                                        <span onClick={e => {this.del(v.invId)}}>删除</span>
                                                    </Flex>
                                                </div>
                                            }
                                        </div>
                                    </div>
                                </WingBlank>
                               );
                        } else {
                            return (<WingBlank key={v.invId}>
                                    <div  className={box_row} >
                                        <div style={{
                                            position: "relative"
                                        }}>
                                            <p className={p_title}>{ v.invCompany }</p>
                                            <p>{ v.invCode }（纳税人识别号）</p>
                                            <p>{ v.invRegAddr }</p>
                                            {

                                                <div className={btn_icon}>
                                                {/*
                                                 <Icon type={cartdelectsvg.id} size={"xxs"} onClick={e => {
                                                 this.del(v.invId)
                                                 }}/>

                                                 <Icon type={icon_editsvg.id} size={"xxs"} onClick={e => {
                                                 e.stopPropagation();
                                                 this.props.dispatch(routerRedux.push({pathname: `/invoice`}));
                                                 }}/>
                                                */}

                                                {
                                                    !v.isPass || <Flex style={{float:"left"}}>
                                                        {
                                                            v.isDefault==1 ?
                                                                <div style={{color:"#FF0036"}}><Icon type={select1svg.id} size="xxs"/><span>设为默认</span></div>
                                                              : <div onClick={() => {
                                                                    dispatch({ type:"accountManagement/edtInvoiceApiEFF", obj: { id: v.invId } });
                                                                }}><Icon size="xxs" type={select2svg.id}/><span>设为默认</span></div>

                                                        }
                                                    </Flex>
                                                }
                                                    <Flex style={{float:"right"}}>
                                                        <span onClick={e => {
                                                            e.stopPropagation();
                                                        dispatch(routerRedux.push({
                                                            pathname: `/invoice/${v.invId}`,
                                                        }));
                                                        }}>编辑</span>
                                                        <span onClick={e => {this.del(v.invId)}}>删除</span>
                                                    </Flex>
                                                </div>
                                            }

                                            <div className={img_status}><Icon type={v.isPass == 1 ? auditedsvg.id : auditFailuresvg.id} style={{height: "1.2rem", width: "1.2rem"}}/></div>
                                        </div>
                                    </div>
                                </WingBlank>
                               );
                        }
                    }} data={this.props.accountManagement.invoiceList.list}/>
            </div>
            {isWechat()? <Flex style={{
                width: "100%",
                position: "fixed",
                bottom: "0",
            }}>
                <Button style={{
                    width: "50%",
                    borderRadius:"0"
                }} onClick={e => {
                    e.stopPropagation();
                    wxInvoice();
                }}>微信添加</Button>
                <Button style={{
                    width: "50%",
                    backgroundColor: "#ff0036",
                    color: "#fff",
                    borderRadius:"0"
                }} onClick={e => {
                    e.stopPropagation();
                    this.props.dispatch(routerRedux.push({pathname: `/invoice`}));
                }}>添加发票抬头</Button>
            </Flex>:  <Button style={{
                width: "100%",
                backgroundColor: "#ff0036",
                color: "#fff",
                position: "fixed",
                bottom: "0",
                borderRadius:"0"
            }} onClick={e => {
                e.stopPropagation();
                this.props.dispatch(routerRedux.push({pathname: `/invoice`}));
            }}>添加发票抬头</Button>}
        </div>);
    }
}

export default connect(({my, accountManagement }) => ({ my,  accountManagement}))(createForm()(MyInvoice));
